<template>
	<view class="BOX">
		<u-navbar @rightClick="rightClick" :autoBack="true">
			<view class="input">
				<input placeholder="请输入搜索内容" v-model="value" class="inp" @blur="search" />
				<icon type="search" size="22" style="position: absolute;top: 10rpx;left: 25rpx;" />
				<view class="clSea" @click="clSea">取消</view>
			</view>
		</u-navbar>

		<view class="box">
			<view style="font-size: 30rpx;margin: 30rpx 0; ">热门搜索</view>
			<view class="ul">
				<navigator class="li" v-for="(item, index) in navs" :key="index" :url="'../listS/listS?content=' + item.content">{{ item.content }}</navigator>
			</view>
		</view>

		<view class="box">
			<view class="hist" style="font-size: 30rpx;margin: 30rpx 0; ">
				历史搜索
				<view style="color: #8e8f96; font-size: 30rpx;" @click="close">清空</view>
			</view>
			<view class="ul">
				<navigator class="li" v-for="(item, index) in his" :key="index" :url="'../listS/listS?content=' + item">{{ item }}</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			his: uni.getStorageSync('his') || [],
			navs: [
				{
					categoryId: null,
					content: 'Java',
					current: 1,
					isFree: null,
					labelId: null,
					size: 10,
					sort: null
				},
				{
					categoryId: null,
					content: 'Python',
					current: 1,
					isFree: null,
					labelId: null,
					size: 10,
					sort: null
				},
				{
					categoryId: null,
					content: 'Vue.js',
					current: 1,
					isFree: null,
					labelId: null,
					size: 10,
					sort: null
				},
				{
					categoryId: null,
					content: 'React',
					current: 1,
					isFree: null,
					labelId: null,
					size: 10,
					sort: null
				},
				{
					categoryId: null,
					content: 'SpringBoot',
					current: 1,
					isFree: null,
					labelId: null,
					size: 10,
					sort: null
				},
				{
					categoryId: null,
					content: 'SpringCloud',
					current: 1,
					isFree: null,
					labelId: null,
					size: 10,
					sort: null
				}
			]
		};
	},
	onLoad() {},
	onShow() {
		this.his = uni.getStorageSync('his') || [];
	},
	methods: {
		rightClick() {
			this.$router.go(-1);
		},
		clSea() {
			uni.navigateBack({
				delta: 1
			});
		},
		search(e) {
			if (this.value.trim() == '') {
				uni.showToast({
					title: '请先输入',
					icon: 'error'
				});
				return false;
			}
			uni.navigateTo({
				// url: './?content=' + this.value
				url: '../listT/list?content=' + this.value
			});
			this.his.unshift(this.value);
			this.value = '';
			uni.setStorageSync('his', this.his);
		},
		close() {
			this.his = [];
			uni.setStorageSync('his', this.his);
		}
	}
};
</script>

<style lang="scss">
.BOX {
	width: 750rpx;
}

.input {
	flex: 1;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.inp {
		flex: 1;
		height: 60rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		background: #f0f1f2;
		padding-left: 80rpx;
		box-sizing: border-box;
	}

	.clSea {
		width: 85rpx;
		font-size: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.box {
	width: 93%;
	margin: 0 auto;
	box-sizing: border-box;
	margin-bottom: 65rpx;

	.hist {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.li {
			padding: 12rpx;
			border-radius: 10rpx;
			border: 3rpx solid #a1a1a1;
			color: #a1a1a1;
			font-size: 22rpx;
			margin: 20rpx 20rpx 0 0;
		}
	}
}
</style>
